<template>
	<div class="moblielogin">
		<img src="../../assets/mobile/img/e8ccfc5f_E917060_ef130796.png" />
		<h3>please Login</h3>
		<el-input prefix-icon="el-icon-user" placeholder="username" v-model="user.username"></i></el-input>
		<el-input type="password" prefix-icon="el-icon-unlock" placeholder="password" v-model="user.password"></i>
		</el-input>
		<el-checkbox v-model="ok">是否已同意本服务条款</el-checkbox>
		<br />
		<el-button @click="login()">login</el-button>
	</div>
</template>

<script>
	
	export default {
		name: 'moblieLogin',
		data() {
			return {
				user: {},
				ok: ''
			}
		},
		computed: {
		
		},
		methods: {
			
			login() {
				console.log(this.user);

				this.$postkv("/api/login", this.user).then((resp) => {
					console.log(resp.data.data);
					if (this.ok == true) {
						this.userinfo();
						window.localStorage.setItem("token", resp.data.data.token);
						this.$router.push({
							path: '/mobile/myhome',
						});
					} else {
						this.$message.error('未同意此服务条款');
					}
				})
				console.log(this.ok);
			},

			userinfo() {
				this.$get("/api/user/info").then((resp) => {
					window.localStorage.setItem("name", resp.data.data.name);
					window.localStorage.setItem("img", resp.data.data.img);
					window.localStorage.setItem("judge", true);
					console.log(resp.data.data.img);
					console.log(resp.data.data.name);

				})
			}
		}
	}
</script>

<style>
	.moblielogin {
		background-color: #f1f1f1;
		width: 100%;
		margin-top: -3.5rem;
		height: 50rem;
	}

	.moblielogin img {
		width: 100%;
	}

	.moblielogin h3 {
		margin-top: 1.25rem;
		text-align: center;
		color: #909090;
		font-family: KaiTi;
		font-size: 25px;
	}

	.moblielogin input {
		margin-top: 20px;
		margin-left: 15%;
		width: 70%;
		border: none;
		background-color: #d8d8d8;
	}

	.el-checkbox__inner {
		margin-left: 59px;

	}

	.el-icon-user {
		margin-left: 60px;
		margin-top: 10px;
	}

	.el-icon-unlock {
		margin-left: 60px;
		margin-top: 10px;
	}

	.moblielogin button {
		margin-top: 30px;
		margin-left: 25%;
		width: 50%;
		border: none;
	}

	::placeholder {
		text-align: center;
		color: #757575;
	}
</style>
